<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->

    <title>RGraph: Javascript charts library - A basic example of Pie charts in tooltips</title>
    
    <meta name="keywords" content="rgraph javascript charts html5 canvas basic example pie charts tooltips" />
    <meta name="description" content="RGraph: Javascript charts library -  A basic example of Pie charts in tooltips" />

    <!-- Include the RGraph libraries -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->

</head>

<body>

    <h1>RGraph: <span>Javascript charts library</span> - A basic example of Pie charts in tooltips</h1>

    <canvas id="myBar" width="1000" height="250">[No canvas support]</canvas>

    <script>
        window.onload = function ()
        {
            /**
            * This creates the Bar chart
            */
            var bar = new RGraph.Bar('myBar', [12,13,16,15]);
            bar.Set('chart.gutter.left', 35);
            bar.Set('chart.colors', ['red']);
            bar.Set('chart.title', 'A basic graph with charts in tooltips');
            bar.Set('chart.labels', ['Kev', 'Brian', 'Fred', 'John']);

            // A function which returns the string which is used as every tooltip
            bar.Set('chart.tooltips', function () { return '<canvas id="__tooltip__canvas__" width="300" height="200">[No canvas support]</canvas>';});

            bar.Draw();


            /**
            * This is the function which ceates the Pie chart (using the custom ontooltip RGraph event
            */
            function myCreatePieChart(obj)
            {
                var canvas  = obj.canvas;
                var context = obj.context;
                var id      = obj.id;
                
                // This gets the tooltip index from the tooltip (which is stored in the RGraph registry) itself
                var idx = RGraph.Registry.Get('chart.tooltip').__index__;
                
                /**
                * The Pie chart data. Realistically this would come from a dynamic source,
                * eg AJAX
                */
                var pieData = [
                               [4,5,3,6],
                               [8,4,5,2],
                               [4,3,5,1],
                               [4,2,1,3]
                              ];
                
                var pie = new RGraph.Pie('__tooltip__canvas__', pieData[idx]);
                pie.Set('chart.key', ['Monday','Tuesday','Wednesday','Thursday']);
                pie.Set('chart.align', 'left');
                pie.Set('chart.gutter.top', 10);
                pie.Set('chart.gutter.bottom', 10);
                pie.Set('chart.gutter.left', 10);
                pie.Set('chart.gutter.right', 10);
                pie.Set('chart.exploded', [3,3,3,3]);
                pie.Set('chart.strokestyle', 'rgba(0,0,0,0)');
                pie.Draw();
            }

            RGraph.AddCustomEventListener(bar, 'ontooltip', myCreatePieChart);
        }
    </script>
    
    <p>
        This is a basic example that shows charts (Pie charts) in tooltips. The canvas element is part of the tooltip
        HTML code (specified like regular tooltips), and then it uses the <i>ontooltip</i> event to run some code whhich
        then creates the Pie chart in the tooltip.
    </p>

</body>
</html><!-- Social networking buttons -->
        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px">
            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a>
            <a href="http://www.twitter.com/_RGraph" target="_blank" title="Follow _RGraph on Twitter"><img src="../images/twitter.png" alt="Follow _RGraph on Twitter"/></a>
            <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&amp;href=http%3A%2F%2Fwww.rgraph.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
        </div>
        
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
            }
        </script>
        
        <div id="google_plusone">
            <!-- Place this tag where you want the +1 button to render -->
            <g:plusone href="http://www.rgraph.net"></g:plusone>
        </div>
    